$(function() {
    // 将未来会有多次使用的数据设成全局变量(存为对象)
    let q = {
            pagenum: 1, //是	int	页码值
            pagesize: 2, //是	int	每页显示多少条数据
            cate_id: "", //否	string	文章分类的 Id
            state: "", //否	string	文章的状态，可选值有：已发布、草稿
        }
        // 把获取文章的列表数据成封装函数
    initArticleList()

    function initArticleList() {
        axios({
            method: `get`,
            url: `/my/article/list`,
            //查询对象
            params: q
        }).then(({ data: res }) => {
            if (res.status !== 0) {
                layui.layer.msg(res.data.message)
            }
            // console.log(res.data);
            let arr = []
            res.data.forEach(ele => {
                arr.push(`
                <tr>
                <td>${ele.title}</td>
                <td>${ele.cate_name}</td>
                <td>${formatDate(ele.pub_date)}</td>
                <td>${ele.state}</td>
                <td>
                    <a href="/article/art_edit.html?${ele.Id}" target="fm">
                    <button data-id="${ele.Id}" type="button" class="edit-btn layui-btn layui-btn-xs">编辑</button>
                    </a>
                    <button data-id="${ele.Id}" type="button" class="del-btn layui-btn layui-btn-danger layui-btn-xs">删除</button>
                </td>
            </tr>
                `)
            })
            $(`tbody`).empty().append(arr)
            renderPage(res.total)
        })
    }
    //渲染文章分类
    initArtCateList()

    function initArtCateList() {
        axios({
            method: `get`,
            url: `/my/article/cates`
        }).then(({ data: res }) => {
            if (res.status !== 0) {
                return layui.layer.msg(res.message)
            }
            let arr = [`<option value="">请选择文章类别</option>`]
            res.data.forEach(ele => {
                arr.push(`
                <option value="${ele.Id}">${ele.name}</option>
                `)
            })
            let str = arr.join(``)
            $(`[name=cate_id]`).empty().html(str)
            layui.form.render()
        })
    }
    // 筛选
    $(`#searchForm`).on(`submit`, function(e) {
        e.preventDefault()
        q.cate_id = $(`[name=cate_id]`).val()
        q.state = $(`[name="state"]`).val()
        initArticleList()
    })

    function renderPage(total) {
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox', //注意，这里的 pageBox 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            limit: q.pagesize, //每页显示多少
            curr: q.pagenum, //第几页
            layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
            limits: [2, 3, 5, 10],
            jump: function(obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数
                //首次不执行
                if (!first) {
                    q.pagenum = obj.curr;
                    q.pagesize = obj.limit;
                    initArticleList()
                        //do something
                }
            }
        });
    }
    // 点击删除
    $(`body`).on(`click`, '.del-btn', function() {
        let id = $(this).attr(`data-id`)
            //eg1
        layer.confirm('确定删除吗?', { icon: 3, title: '提示' }, function(index) {
            //do something
            axios({
                method: `get`,
                url: `/my/article/delete/${id}`
            }).then(({ data: res }) => {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message)
                }
                layer.msg(`恭喜您，删除文章成功！`)
                    // 当页面中最后一条被删除时
                    // 页面删除按钮的个数就是数据条数
                    // 页面不能小于1
                    // 判断。当条件满足就执行反之不执行
                $(`.del-btn`).length == 1 && q.pagenum >= 2 && q.pagenum--
                    initArticleList()
            })
            layer.close(index);
        });
    })


})